import React, {useState} from "react";
import {
    Button,
    FormControlLabel,
    FormLabel,
    Grid,
    IconButton,
    InputAdornment,
    InputLabel,
    makeStyles,
    Paper,
    Radio,
    RadioGroup,
    TextField
} from "@material-ui/core";
import {Toolbar} from "../../shared/components";
import {FileCopyRounded} from "@material-ui/icons";

const useStyle = makeStyles(theme => ({
    paper: {padding: theme.spacing(3, 2)}
}));

const AddFault = ({onClose, onConfirm}) => {
    const classes = useStyle();
    const [state, setState] = useState({
        type: 'repair'
    });

    const handleChange = (field, value) => {
        setState({...state, [field]: value});
    };

    return (
        <Grid container spacing={4}>
            <Toolbar
                title="Add Fault"
                actions={
                    <React.Fragment>
                        <Button color="primary" variant="contained" onClick={onConfirm}>Add</Button>
                        <Button variant="contained" onClick={onClose}>Cancel</Button>
                    </React.Fragment>
                }
            />

            <Grid item xs={12}>
                <Paper elevation={2} className={classes.paper}>
                    <Grid container spacing={3} alignItems={"center"}>
                        <Grid item xs={2}><InputLabel htmlFor="vehicleNumber">Vehicle Number</InputLabel></Grid>
                        <Grid item xs={4}>
                            <TextField
                                id="vehicleNumber"
                                name="vehicleNumber"
                                variant="outlined"
                                fullWidth
                                InputProps={{
                                    endAdornment: (
                                        <InputAdornment position="end">
                                            <IconButton
                                                edge="end"
                                                onClick={() => console.log('Copy vehicle number')}
                                                onMouseDown={e => e.preventDefault()}
                                            >
                                                <FileCopyRounded/>
                                            </IconButton>
                                        </InputAdornment>
                                    )
                                }}
                                value={''}
                                onChange={e => console.log('Vehicle Number')}
                            />
                        </Grid>
                        <Grid item xs={6}/>

                        <Grid item xs={2}><InputLabel htmlFor="fault">Fault</InputLabel></Grid>
                        <Grid item xs={4}>
                            <TextField
                                id="fault"
                                name="fault"
                                variant="outlined"
                                fullWidth
                                onChange={e => console.log('Fault')}
                            />
                        </Grid>
                        <Grid item xs={6}/>

                        <Grid item xs={2}><FormLabel>Type</FormLabel></Grid>
                        <Grid item xs={10}>
                            <RadioGroup
                                name="faultType"
                                row
                                value={state.type}
                                onChange={e => handleChange('type', e.target.value)}
                            >
                                <FormControlLabel value="repair" control={<Radio/>} label="Repair"/>
                                <FormControlLabel value="replace" control={<Radio/>} label="Replace"/>
                            </RadioGroup>
                        </Grid>

                        <Grid item xs={12}><InputLabel htmlFor="description">Description</InputLabel></Grid>
                        <Grid item xs={12}>
                            <TextField
                                id="description"
                                name="description"
                                variant="outlined"
                                fullWidth
                                multiline rows={4}
                                onChange={e => console.log('Description')}
                            />
                        </Grid>
                    </Grid>
                </Paper>
            </Grid>
        </Grid>
    );
};

export default AddFault;
